<template>
  <div>
      <p class="phonerighttop">换绑手机</p>
      <div class="Dmain">
          <div class="Dtop">
              <div class="Dtop1" :class="{'Dtop12':green1}">
                  <p>1.验证原手机号</p>
              </div>
              <div class="Dtop2" :class="{'Dtop22':green2}">
                  <p>2.验证新手机号</p>
              </div>
              <div class="Dtop3" :class="{'Dtop32':green3}">
                  <p>3.换绑成功</p>
              </div>
          </div>
          <Datachange1 @tiao1="tosuccess()" v-if="change1"/>
          <Datachange2 v-if="change2" @tiao1="tosuccess1()"/>
          <Datachange3 v-if="change3" />
      </div>
  </div>
</template>

<script>
import Datachange1 from './Datachange1';
import Datachange2 from './Datachange2';
import Datachange3 from './Datachange3';
export default {
    name:'Datachange',
    data(){
        return{
            green1:true,
            green2:false,
            green3:false,
            change1:true,
            change2:false,
            change3:false,
        }
    },
    components:{
        Datachange1,
        Datachange2,
        Datachange3,
    },
    methods:{
        tosuccess(){
            this.change1 = false;
            this.green1 = false;
            this.green2 = true;
            this.green3 = false;
            this.change2 = true;
            this.change3 = false;
        },
        tosuccess1(){
            this.change1 = false;
            this.green1 = false;
            this.green2 = false;
            this.green3 = true;
            this.change2 = false;
            this.change3 = true;
        }
    }
}
</script>

<style  scoped>
.phonerighttop {
    height: 56px;
    border-bottom: 1px solid #e7e7e7;
    line-height: 56px;
    text-align: left;
    padding-left: 20px;
    color: #323333;
    font-size: 18px;
}
.Dmain {
    margin-top: 40px;
    margin-left: 40px;
    font-size: 18px;
    color: #333333; 
}
.Dtop {
    display: flex;
}
.Dtop div {
    width: 247px;
    height: 42px;
    line-height: 42px;
}
.Dtop div p {
    padding-left: 50px;
}
.Dtop1 {
    background: url(../../assets/imgs/Datachange1.png) no-repeat;
}
.Dtop12 {
    background: url(../../assets/imgs/Datachange.png) no-repeat;
    color: #fff;
}
.Dtop2 {
    background: url(../../assets/imgs/Datachange2.png) no-repeat;
}
.Dtop22 {
    background: url(../../assets/imgs/Datachange3.png) no-repeat;
    color: #fff;
}
.Dtop3 {
    background: url(../../assets/imgs/Datachange4.png) no-repeat;
}
.Dtop32 {
    background: url(../../assets/imgs/Datachange5.png) no-repeat;
    color: #fff;
}
</style>